<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表过滤</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--Vue容器-->
<div id="root">
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入名字：" v-model="keyword">
    <ul>
        <li v-for="p in filPerons" :key="p.id">
            {{p.name}}===={{p.sex}}====={{p.age}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    //watch实现
    // var vm = new Vue({
    //     el: '#root',
    //     data: {
    //         keyword: '',
    //         persons: [
    //             {id: '001', name: '马冬梅', age: 19, sex: '女'},
    //             {id: '002', name: '周冬雨', age: 20, sex: '女'},
    //             {id: '003', name: '周杰伦', age: 21, sex: '男'},
    //             {id: '004', name: '温兆伦', age: 22, sex: '男'}
    //         ],
    //         filPersons: []
    //     },
    //     methods: {},
    //     computed: {},
    //     watch: {
    //         keyword: {
    //             immediate: true,
    //             handler(newV, oldV) {
    //                 this.filPersons = this.persons.filter((p) => {
    //                     //indexof('')返回0
    //                     return p.name.indexOf(newV) !== -1;
    //                 });
    //             }
    //         }
    //
    //     }
    // });
    //使用computed实现
    new Vue({
        el: '#root',
        data: {
            keyword: '',
            persons: [
                {id: '001', name: '马冬梅', age: 19, sex: '女'},
                {id: '002', name: '周冬雨', age: 20, sex: '女'},
                {id: '003', name: '周杰伦', age: 21, sex: '男'},
                {id: '004', name: '温兆伦', age: 22, sex: '男'}
            ]
        },
        computed: {
            filPerons() {
                return this.persons.filter((p) => {
                    return p.name.indexOf(this.keyword) !== -1
                })
            }
        }
    })
</script>
</body>
</html>